interface CalendarPageProps {
  params: { userId: string };
}

export default function CalendarPage({ params: { userId } }: CalendarPageProps) {
  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">Calendar</h1>
          <p className="text-muted-foreground mt-1">项目日程安排和里程碑管理</p>
        </div>
        <div className="flex items-center space-x-2">
          <button className="px-4 py-2 border border-input rounded-lg hover:bg-accent transition-colors">
            今天
          </button>
          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
            新建事件
          </button>
        </div>
      </div>

      {/* 日历视图切换 */}
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <div className="flex items-center space-x-2">
            <button className="p-2 hover:bg-accent rounded-lg transition-colors">
              <span className="text-foreground">←</span>
            </button>
            <h2 className="text-xl font-semibold text-foreground">2024年1月</h2>
            <button className="p-2 hover:bg-accent rounded-lg transition-colors">
              <span className="text-foreground">→</span>
            </button>
          </div>
        </div>
        
        <div className="flex items-center space-x-1 bg-muted rounded-lg p-1">
          <button className="px-3 py-1 bg-background text-foreground rounded-md text-sm font-medium shadow-sm">
            月
          </button>
          <button className="px-3 py-1 text-muted-foreground rounded-md text-sm font-medium hover:bg-background transition-colors">
            周
          </button>
          <button className="px-3 py-1 text-muted-foreground rounded-md text-sm font-medium hover:bg-background transition-colors">
            日
          </button>
        </div>
      </div>

      {/* 日历网格 */}
      <div className="bg-card rounded-xl border shadow-sm">
        <div className="p-6">
          {/* 星期标题 */}
          <div className="grid grid-cols-7 gap-4 mb-4">
            {['周日', '周一', '周二', '周三', '周四', '周五', '周六'].map((day) => (
              <div key={day} className="text-center text-sm font-medium text-muted-foreground py-2">
                {day}
              </div>
            ))}
          </div>
          
          {/* 日期网格 */}
          <div className="grid grid-cols-7 gap-4">
            {/* 生成一个月的日期 */}
            {Array.from({ length: 35 }, (_, index) => {
              const dayNumber = index - 5; // 假设1号是周六，前面有5个空格
              const isValidDay = dayNumber > 0 && dayNumber <= 31;
              const isToday = dayNumber === 15; // 假设今天是15号
              const isWeekend = index % 7 === 0 || index % 7 === 6;
              
              return (
                <div
                  key={index}
                  className={`min-h-24 p-2 border border-border rounded-lg ${
                    isValidDay ? 'hover:bg-muted/50 cursor-pointer' : ''
                  } ${isToday ? 'bg-primary/10 border-primary' : ''} ${
                    isWeekend && isValidDay ? 'bg-muted/30' : ''
                  }`}
                >
                  {isValidDay && (
                    <>
                      <div className={`text-sm font-medium mb-1 ${
                        isToday ? 'text-primary' : 'text-foreground'
                      }`}>
                        {dayNumber}
                      </div>
                      
                      {/* 事件显示 */}
                      {dayNumber === 15 && (
                        <div className="space-y-1">
                          <div className="text-xs p-1 bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400 rounded truncate">
                            团队会议
                          </div>
                          <div className="text-xs p-1 bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400 rounded truncate">
                            代码审查
                          </div>
                        </div>
                      )}
                      
                      {dayNumber === 18 && (
                        <div className="text-xs p-1 bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded truncate">
                          项目截止
                        </div>
                      )}
                      
                      {dayNumber === 22 && (
                        <div className="text-xs p-1 bg-purple-100 dark:bg-purple-900/20 text-purple-800 dark:text-purple-400 rounded truncate">
                          客户演示
                        </div>
                      )}
                      
                      {dayNumber === 25 && (
                        <div className="text-xs p-1 bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-400 rounded truncate">
                          里程碑检查
                        </div>
                      )}
                    </>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* 今日事件和即将到来的事件 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 今日事件 */}
        <div className="bg-card rounded-xl border shadow-sm">
          <div className="p-6 border-b border-border">
            <h2 className="text-xl font-semibold text-foreground">今日事件</h2>
          </div>
          <div className="p-6">
            <div className="space-y-4">
              {[
                {
                  title: '团队站立会议',
                  time: '09:00 - 09:30',
                  type: 'meeting',
                  participants: 8,
                  location: '会议室A'
                },
                {
                  title: '代码审查',
                  time: '14:00 - 15:00',
                  type: 'review',
                  participants: 4,
                  location: '在线'
                },
                {
                  title: '用户反馈讨论',
                  time: '16:30 - 17:30',
                  type: 'discussion',
                  participants: 6,
                  location: '会议室B'
                }
              ].map((event, index) => (
                <div key={index} className="flex items-center space-x-3 p-3 bg-muted/50 rounded-lg">
                  <div className={`w-3 h-3 rounded-full ${
                    event.type === 'meeting' ? 'bg-blue-500' :
                    event.type === 'review' ? 'bg-green-500' : 'bg-purple-500'
                  }`}></div>
                  <div className="flex-1">
                    <h3 className="font-medium text-foreground">{event.title}</h3>
                    <div className="text-sm text-muted-foreground">
                      {event.time} • {event.participants}人 • {event.location}
                    </div>
                  </div>
                  <button className="px-3 py-1 text-sm border border-input rounded-md hover:bg-accent transition-colors">
                    加入
                  </button>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* 即将到来的里程碑 */}
        <div className="bg-card rounded-xl border shadow-sm">
          <div className="p-6 border-b border-border">
            <h2 className="text-xl font-semibold text-foreground">即将到来的里程碑</h2>
          </div>
          <div className="p-6">
            <div className="space-y-4">
              {[
                {
                  title: 'MVP版本发布',
                  date: '2024-01-18',
                  progress: 85,
                  priority: 'high',
                  daysLeft: 3
                },
                {
                  title: '用户测试阶段',
                  date: '2024-01-25',
                  progress: 60,
                  priority: 'medium',
                  daysLeft: 10
                },
                {
                  title: '正式版本上线',
                  date: '2024-02-01',
                  progress: 40,
                  priority: 'high',
                  daysLeft: 17
                }
              ].map((milestone, index) => (
                <div key={index} className="p-4 border border-border rounded-lg">
                  <div className="flex items-center justify-between mb-2">
                    <h3 className="font-medium text-foreground">{milestone.title}</h3>
                    <span className={`px-2 py-1 text-xs font-medium rounded-full ${
                      milestone.priority === 'high'
                        ? 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-400'
                        : 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-400'
                    }`}>
                      {milestone.priority === 'high' ? '高优先级' : '中优先级'}
                    </span>
                  </div>
                  
                  <div className="text-sm text-muted-foreground mb-3">
                    截止日期: {milestone.date} • 还有 {milestone.daysLeft} 天
                  </div>
                  
                  <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">完成进度</span>
                      <span className="text-foreground font-medium">{milestone.progress}%</span>
                    </div>
                    <div className="w-full h-2 bg-muted rounded-full">
                      <div 
                        className="h-full bg-primary rounded-full"
                        style={{ width: `${milestone.progress}%` }}
                      />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 